<template>
  <div class="vuex">
    <h1>父组件---{{ $store.state.count }}</h1>
    <h1>父组件---{{ $store.getters.getCount }}</h1>
    <h1>父组件---{{ getCount }}</h1>
    <h1>父组件---{{ count1 }}</h1>
    <h1>父组件---{{ count1 }}</h1>
    <button @click="handleAddCount">+</button>
    <!-- {{ $store.state.todos }} -->
    <child></child>
  </div>
</template>
<script>
import Child from './Child.vue'
// import { ADD_COUNT } from '@/store/mutation-types.js'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
      // count: '100'
    }
  },
  created() {
    // this.$store.dispatch('getTodos')
    this.getTodos()
  },
  methods: {
    // handleAddCount() {
    //   // 该方式直接修改了state的数据，但是无法监听到谁修改了
    //   // this.$store.state.count++
    //   // 没有传递参数
    //   // this.$store.commit('addCount')
    //   // this.$store.commit('addCount', 2)
    //   this.$store.commit({
    //     // type是固定的用于设置触发的函数
    //     type: 'addCount',
    //     // payload用于传递参数，可以是任意的变量
    //     payload: 1
    //   })
    // }
    // 数组的方式 不能修改函数的名称已经传递参数
    // ...mapMutations(['addCount'])
    ...mapMutations({
      handleAddCount: {
        type: 'ADD_COUNT',
        payload: 2
      }
    }),
    // ...mapActions(['getTodos'])
    ...mapActions({
      getTodos: {
        type: 'getTodos'
      }
    })
  },
  components: {
    Child
  },
  // computed: {
  //   count() {
  //     return this.$store.state.count
  //   }
  // }
  // computed: mapState({
  //   count: (state) => state.count,
  // })
  computed: {
    // 如果获取的数据不需要重命名使用数组写法
    // ...mapState(['count'])
    // 如果获取的数据需要重命名使用对象写法
    ...mapState({
      count1: (state) => state.count
    }),
    // ...mapGetters(['getCount'])
    ...mapGetters({
      getCount: 'getCount'
    })
    // getCount() {
    //   return this.$store.getters.getCount
    // }
  }
}
</script>
<style lang="scss" scoped></style>
